Copyright: 1997 Ramin Nourbakhch, Irmgard Wasinger


Contents

WWW Gif Animator is designed to provide an easy to use yet powerful

way to improve the appearance of your WWW Pages.

WWW Gif Animator creates a Gif 89a image from multiple images or creates multiple images from few images using powerful built-in Effects and Transitions. All major Internet Browsers like Netscape Navigator and Microsoft Internet Explorer interpret multiple images in a single Gif 89a file as a stream of images displayed sequentially like an animation. This task could also be achieved by programming Java, which is much more time consuming and many Browsers are configured not to support Java because of security lacks, additionally you have to create each image yourself. Anyway WWW Gif Animator supports this task by allowing you to save the produced images as Gif or Jpg images one by one, so they can be inserted into an existing Java Applet.

WWW Gif Animator supports two major ways to produce animations :

·	Slideshows

All you have to do is load images, specify the time delay between displaying them in the Global Parameter Dialog, save the project and you have got your first animation. This Image can be inserted easily in any HTML document and looks like a slideshow.

·	Effect/Transitions

The real Power of WWW Gif Animator are the Tools to create more impressive animations than slideshows :

Transitions ( one image transforms into another)

Effects (one image changes its appearance)

Although WWW Gif Animator allows compressing the prodcued Gif 89a animation in addition to the LZW-Gif compression, the resulting image stream is still bigger than a single image, so keep the bandwidth problem in mind (nothing is more boring than waiting for a web page to be loaded). See File|SaveAs for information about compression.

Note: an effective animated Gif can say more than static images, but still the animated image should have reasonable size.

Additional Help is available for :

·	User Interface

·	Menus

·	Options Dialog

·	Global/Local Parameter Dialog

·	Key Bindings

·	Effects and Transitions

·	Banner Text

·	HTML

·	How To Register


JAVA
Java was developed by Sun Microsystems, Inc.

2550 Garcia Avenue

Mountain View, California 94043

Java is an object oriented language producing binaries running on all major platforms without having to be recompiled.

Refer to  http://java.sun.com/


How To Register

WWW Gif Animator is Shareware which means you are allowed to test the product ( usually 30 days ) - after a reasonable period of time you should know how useful WWW Gif Animator is.

If you like the program - or want to support the idea of Shareware or want the authors to continue their ( hard ) work - you should register this product.

Registration :

There are two ways to register :

·	The cheaper and easier way :
Just send the money ( no coins ) in  a letter directly to the address below. This is the preferred way because no fees for credit cards or cheques are to be added. Using this method over 100 people registered our last Shareware product with not a single order being lost, so you really can trust this method.

·	Using Credit Cards or Cheques :
This method is a bit more expensive, because of the fee for the company accepting your Credit Card or Cheque.
Credit Card Registration is not available yet, but will be for the next version at the latest - we'll announce this possibility on our homepage.

There should have been a file named ORDER.FRM in the archive you got. This form includes everything we need to send you a Registration Code which you enter in the Dialog which appears each time at startup or is available via HELP|Register.

If you can't find the file ORDER.FRM, just send a letter to the address below including

·	Your First Name

·	Your Last Name

·	Your Email (if available) or your address , so you can receive your code

·	Some notes what you think about WWW Gif Animator - Absolutely all ideas for further versions are welcome !!!

Contact Address for Registration :

Irmgard Wasinger

Turmburggasse 2/33

A-1060 Vienna

Austria

If you have any question please feel free to send us an Email us :

Irmgard Wasinger	e8925004@stud1.tuwien.ac.at

Ramin Nourbakhch 	e8925005@stud1.tuwien.ac.at

Roman Komary	e8925453@stud1.tuwien.ac.at

Conventional Letters : Please use the Contact Address above

Don't forget to check our HomePage for news and updates:

http://stud1.tuwien.ac.at/~e8925005/


User Interface

The Main User Interface consists of a TreeView and the Display Region .

The interactions are performed via the Menus , the Toolbar and/or Hotkeys ( refer to Key Bindings ).


TreeView

The left side of the User Interface shows a 'script' ( TreeView ) of the included Images and Effects.

root

At Program Startup the only item available is root - always marking the beginning of the script.

Gif : name

Each time you load an image, a new item is inserted in the script representing the new image(s) - some Gif 89a images contain more than one image, so they will be inserted one by one.

The item representing the image consists of Gif : 'name' , where name stands for the filename helping you to identify the image.

When you select this item using the mouse or cursor keys, the image will be displayed in the Display Region .

Effect : name

When an image-item is selected, you can create new images based on this image by inserting an Effect .

Inserting an Effect is only possible if an Image is selected in the TreeView, so make sure an item starting with Gif : .... is highlighted.

There are 4 ways to do this :  Press the Effect/Transition button right below the TreeView ,
Press the right mouse button to get a Context Menu where you can select Inset Effect ,
Use the Edit Menu : Edit|Insert Effect ,or
Use the accelerator : Press E while holding down the Control key.

As a result of inserting an Effect you will be able to choose a method in the Effect/Transition Dialog , provide additional parameters and see a preview.

After you have pressed Ok, the item Effect : name is inserted in the TreeView, where 'name' describes the Effect. All images produces by the Effect are inserted in the TreeView as SubItems or ChildItems to help you distinguish between the original images and images produced by an Effect or Transition. So if you don't like the result of an Effect just select the Effect item and Delete it.

Transition : name

When an image-item is selected and there is at least one image following it you can create new images of this image by inserting a Transition .

Inserting a Transition is only possible if an Image is selected in the TreeView, so make sure an item starting with Gif : .... is highlighted.
Since a Transition creates images depending on a start and an end image, there must be at least one image below the image selected.
If not load a second image, or select an image which has an image below it.

There are 4 ways to do this : Press the Effect/Transition button right below the TreeView ,
Press the right mouse button to get a Context Menu where you can select Inset Transition ,
Use the Edit Menu : Edit|Insert Transition ,or
Use the accelerator : Press T while holding down the Control key.

As a result of inserting a Transition you will be able to choose a method in the Effect/Transition Dialog , provide additional parameters and see a preview.

After you have pressed Ok, the item Transition : name is inserted in the TreeView, where 'name' describes the Effect. All images produces by the Transition are inserted in the TreeView as SubItems or ChildItems to help you distinguish between the original images and images produced by an Effect or Transition. So if you don't like the result of a Transition just select the Transition item and Delete it.

Banner : name

Each time a Banner Animation was inserted, a list of the created images named Gif:Banner... is displayed below this key.

Inserting a Banner is always possible, no matter if an image is selected or not.

There are 4 ways to do this :  Use the Edit Menu : Edit|Banner  ,or
Use the accelerator : Press B while holding down the Control key.

As a result of inserting a Banner you will be able to enter a text  in the Banner Dialog , provide additional parameters and see a preview.


Display Region

At the right Side of the main window the Image currently selected in the TreeView is displayed.

If the dimension of the Image is larger than the available space, the Image is shrinked to fit into the window.

In case the image was optimized, dashed rectangles will appear to indicate the part of the image that is valid for saving, effects, ...


Key Bindings

Following is a list of all supported keybindings

New	Ctrl+N

Open	Ctrl+O or F3

Save As	Ctrl+S or F12 or F2

Exit	Alt+X

Cut	Ctrl+X

Copy	Ctrl+C or Ctrl+Ins

Paste	Ctrl+V

Delete Image	Del

Duplicate	Ctrl+D

Insert Effect	Ctrl+E

Insert Transition	Ctrl+T

Insert Banner	Ctrl+B

Play Animation	Ctrl+P -> actually toggling animation state

Stop Animation	Ctrl+P -> actually toggling animation state

First Pic	Pos 1

Last Pic	End

Help	F1

History :	Alt+1 .... Alt+5


Menus

The Menus consist of

The File Menu

The Edit Menu

The Insert Menu

The Preferences Menu

The Preview Menu

The Help Menu

When pressing the right mouse button on an item in the TreeView you will see the

The Context Menu

The File Menu

New

to Remove all Images from the Script and start a new one.
Hotkey : Ctrl+N

Open

to open an existing Image, which will be added below the selected item in the TreeView .
The opened Image may consist of several images which will be added to the script in the TreeView one after another.
Currently Gif 87a,Gif 89a(*.GIF),JPEG (*.JPG), Bitmaps (*.BMP), DIBitmaps(*.DIB),Truevision Targa (*.TGA), Icons (*.ICO ),Cursors(*.CUR),AVI Files (*.AVI) and Animated Cursors( *.ANI ) are supported.
Related : If you want to start a new project choose File|New , then open a new Image,
Hotkey : Ctrl+O or F3

SaveAs

to save the whole script (all images) as a Gif 98a file containing the animation.
If you check 'Save Optimized', the images will prior be optimized in three steps:

·	As many colors as possible will be packed into the global palette, so as many images as possible will use the same global color table.

·	Only the region of the images will be saved which differs from the prior image leading to new values for x-offset, y-offset, width and height.

·	Pixels which have the same color as the pixel in the prior image will be replaced by the transparent color - this increases the efficiency of the LZW compression.

You can choose the level for the optimization - Quality vs. Size - using the Slider.

To discard the unoptimized version and view the optimized one after saving, check 'Display Optimization Results'.
Related : File|Open.
Hotkey : Ctrl+S or F12 or F2

Export Image

to save the Image currently selected in the TreeView as one Image(Gif or JPG supported).
Related : If you want to save all Images use  File|Save.
Hotkey : n/a

Exit

to close the program. If any changes in were detected, you'll be asked if you want to to save the script as a Gif 98a File before exiting.
Hotkey : Alt+X

( History )

The last 5 files which were loaded or saved are displayed below the Exit Menuitem so they can be reloaded fast.
Hotkey : Alt + ( 1..5 )

The Edit Menu

Cut

to remove an image from the script, but store it for later access.
Related : Edit|Paste
Hotkey : Ctrl+X

Copy

to copy the currently selected  Image to the Clipboard, so every image can be used by other applications or it can be pasted into the script at another position.
Related : Edit|Paste
Hotkey : Ctrl+C or Ctrl+Ins

Paste

to insert an image from the clipboard. This is the easiest way to import images from other applications without having to save them to a file.
Related : Edit|Copy
Hotkey : Ctrl+V

Delete

to remove an image from the script. This image is permanently lost.
Related : Edit|Cut
Hotkey : Del

Duplicate

to insert a copy of the currently selected image right below it.
Related : Edit|Copy
Hotkey : Ctrl+D

Optimize

performs the same actions as Save with optimization turned on, but doesn't save the file. This feature tries to shrink the images as far as possible by finding the smallest rectangle different from the previous image, by trying to put as many colors into the global palette, so the local palette doesn't have to be stored, by extensive use of the transparent color, so the LZW-Gif compression works more effective.

The results of this process are differently sized images, so further applying effects/transitions is quite dangerous. Therefore the inverse process  Edit|UnOptimize is implemented.
Related : Edit|UnOptimize
Hotkey : n/a

UnOptimize

when optimized Gifs are loaded, or the Edit|Optimize feature has been applied, this process collects all information producing equally sized images with no transparent color. This is especially useful when you want to continue editing the image.
Related : Edit|Optimize
Hotkey : n/a

Resize

to resize the images - if more than one image is loaded, all images will be resized.

Related : n/a

Hotkey : n/a

The Insert Menu

Insert Effect

to use the selected image as the source for an Effect.
Related : Select Effect/Transition Dialog
Hotkey : Ctrl+E

Insert Transition

to insert a Transition using the currently selected image as the source, its successor as the destination image.

Related : Select Effect/Transition Dialog
Hotkey : Ctrl+T

Banner Text

to insert a Banner Text.
Related : Banner Text
Hotkey : Ctrl + B

Comment
to insert or view a comment .
Related : n/a
Hotkey : n/a

The Preferences Menu

Parameters

to toggle the view of the Parameters Dialog .
Related : Parameters Dialog
Hotkey : pressing 'Enter ' or double-clicking on a selected Gif in the Treeview.

Options

to set the options for the user interface and for image compression in an Options Dialog.
Related : Options Dialog
Hotkey : n/a

The Preview Menu

Start Preview

to start the preview of the produced animation. This Item is only available if the are at least two images in the script.
Related : Stop Preview
Hotkey : Ctrl+P (which actually toggle the animation on/off)

Stop Preview

to stop a running animation. This Item is only available if the are at least two images in the script.
Related : Start Preview
Hotkey : Ctrl+P (which actually toggle the animation on/off)

Goto First Image

to make the first image in the script the active one.
Related : Goto Last Image
Hotkey : Pos 1

Goto Last Image

to make the last image in the script the active one.
Related : Goto First Image
Hotkey : End

The Help Menu

Contents

An Overview of Help Topics.
Related : n/a
Hotkey : F1

Search For Help On

Useful for searching for help on a special keyword.
Related : n/a
Hotkey : n/a

How To Use Help

Basic Information about Help Files.
Related : n/a
Hotkey : n/a

KeyBindings

A list of all Key Strokes resulting in commands ( like F1 for Help ).
Related : n/a
Hotkey : n/a

Register

If you have registered use this dialog to enter the Code.
Related : How To Register
Hotkey : n/a

About

The Logo and the names of the authors.
Related : n/a
Hotkey : n/a

When you press the right mouse button on an item in the TreeView you will get the

The Context Menu

This is the easiest way to access item-specific commands.

The Context Menu contains   Cut, Copy, Paste, Delete, Duplicate, Insert Effect, Insert Transition from the Edit Menu ,
 Import Image (=Open), Export Image from the  File Menu .


Gif 89a
Gif 89a is a File Format for storing graphic data :

The main advantage of Gif 98a is that it can store multiple Images which are displayed as an animation by certain Web Browsers like Netscape or MS Explorer.

Older Browsers not supporting Gif 89a read the file like the old styled Gif 87a, therefor only the first image is displayed.

G I F (tm)

Graphics Interchange Format (tm)

A standard defining a mechanism

for the storage and transmission

of raster-based graphics information

June 15, 1987

(c) CompuServe Incorporated, 1987

All rights reserved


Animated Cursors
Microsoft Windows can use Animated Cursors(*.ani) instead of usual Cursors (*.cur).

Animated Cursors are a stream of Cursors with the size of 32x32 and 16 or 256 Colors.


Options Dialog

Configure WWW Gif Animator to suit your style

General

Confirm image removal from list
If checked, you will be asked to confirm whether you really want to delete an image from the Tree View.

Allow multiple program Instances
If checked, more than one instance of WWW Gif Animator can be started at once. This option is turned off by default, because if Gif files are associated with WWW Gif Animator and you select more than one image in the Explorer and press enter, each of the selected images will be opened in a separate instance of WWW Gif Animator .

Reactivate all Warnings
Press this button to reactivate all warnings previously disabled by 'Don't Show this message again '.

Preview

Confirm image removal from list
If checked, the number of images entered in the Select Effect/Transition Dialog will be used to create the preview. This may took quite long therefore :

Always use ... Frames
If checked, the number you enter in the edit field will be used for calculating the preview regardless of the value you enter in the Select Effect/Transition Dialog.

Preview active
If checked, a preview of the selected effect/transition will be available in the Select Effect/Transition Dialog.

Jpeg

Keep Truecolor data for Jpeg export
Many of the Effects/Transitions use truecolor information, then convert the image to a 256 color image and then delete the 'unused' truecolor data.
If this option is checked this data will not be deleted, which is only useful if you want to export the resulting images as Jpeg files.
If you get low on memory and you don't want to export Jpegs you should turn off this option.

Jpeg Compression
Use this Slider to choose the compression level for Jpeg files, this is a trade-off between quality and image size.
100 .... no compression - rather big files
     0 ... maximum compression - low quality
A value of 75 is recommended, but depends on the image saved.

Gif Optimization

Quality vs. Size
Use this Slider to choose whether you prefer a more perfect quality or a smaller size when optimizing the images for saving.
This choice determines how close two color in preceeding images have to be to substitute the color of the second image with the transparent color (thus letting the color of the previous image 'shine through').
Replacing more colors by the transparent color results in better compression of the images, but may cause a slight change in their appearance. Additionally, smaller rectangles can usually be found if the transparent color is used more often.

You can choose between:
Highest Quality - only identical colors will be substituted
High Quality
Medium - a good trade-off
Small Size
Smallest Size - radical color substitution


Resize Dialog

Use this dialog to resize all images in the script.

On the left side you see the original imagesize, the edit fields on the right side allow you to enter the desired size.

Maintain Aspect Ratio

In order to avoid distortion, check this option, so the ratio width to height will be maintained.

Maintain Transparency

This option is only available if a transparent color is used in any of the images that will be resized !
If turned off, the images will be 'UnOptimized' which eliminates the transparent color and makes all images have the same size.
If tuned on, the transparent color will be kept, but especially for large changes in size the results might not be as good as without transparency information.


Global/Local Parameter Dialog

Global Parameters

Parameters concerning the style of the whole animation object

Width

Specifies the width of the whole animation object.

Height

Specifies the height of the whole animation object.

Global Delay

Specifies that a Global Delay will be used ,ignoring - but not deleting - the value entered for each image under the Local Parameters.

Nr. of Loops

Specifies the number of times the animation will be played. Use the checkbox Infinite, if you want the animation to be played forever.

Use Global Palette

Since Gif Images consist of a Global Color Map and optional additional Local Color Maps, this Parameter specifies whether to use a Global Color Map, which can be edited using the Edit Palette Button.

Background Color

Since single Gif Images in a stream may be smaller than the value specified as Width and Height, this Color is used to make all the images in the animation have the same size.

Local Parameters

Parameters concerning the style of each image in the animation object

Width

Specifies the width of the currently selected image.

Height

Specifies the height of the currently selected image.

x-Offset

The image information starts at this column, all columns before this one will be filled with the background color.

y-Offset

The image information starts at this row, all rows before this one will be filled with the background color.

Use Local Palette

Since Gif Images consist of a Global Color Map and optional additional Local Color Maps, this Parameter specifies whether to use a Local Color Map for the currently selected image, ignoring the Global Color Map. The Local Color Map can be edited using the Edit Palette Button.

Transparent Color

One Color can be specified to be the transparent one. This means this color will not be used for drawing the image, instead the background (not the background color) will shine through at this position (e.g.: the background image specified in your HTML Page). At the right of this field you see the color used to represent the Transparent Color. You can edit this value by clicking in this field with the left mouse button.

Local Delay

Specifies the Local Delay for the selected image ,ignoring - but not deleting - the value entered as Global Delay.

Interlaced

Specifies whether the current image is interlaced or not..


Delay
The time to wait before switching to the next image.


Interlaced
A special way to store Gif images.

The rows of an Interlaced images are arranged in the following order:

      Group 1 : Every 8th. row, starting with row 0.              (Pass 1)

      Group 2 : Every 8th. row, starting with row 4.              (Pass 2)

      Group 3 : Every 4th. row, starting with row 2.              (Pass 3)

      Group 4 : Every 2nd. row, starting with row 1.              (Pass 4)

Further Reading : Gif Specification


Effects and Transitions
Tools

Beside constructing your animation by inserting single images into the script which will be shown one after another when the animation is running,WWW Gif Animator makes it very easy to create impressive animations, because of :

·	Effects

&

·	Transitions ( goto description of Transitions)

What is an Effect ?

An Effect takes only one source Image and creates a certain number of succeeding images, which are inserted right below the selected image. There are a lot of Effects available in WWW Gif Animator like turning the image around or embossing it. The number of images produced, the type of the effect and additional parameters are entered in the Select Effect/Transition Dialog.

While the Effect needs only a source image a Transition needs a second image : the destination image

Available Effects :

Description of Effects

What is a Transition ?

A Transition creates a certain number of succeeding images beginning with the source image and ending with the destination image. There are a lot of Transitions available in WWW Gif Animator like turning the source image around so the second image appears 'on the other side' or fading from one image to another. The number of images produced , the type of the Transition and additional parameters are entered in the Select Effect/Transition Dialog.

Available Transitions :

Description of Transitions


Select Effect/Transition Dialog

This Dialog is used for selecting type of Process ( Effect / Transition ) , the number of images to produce , to see a Preview and provide additional parameters.

At the top left corner you'll see the Preview . Use the CheckBox below it to turn it off, to save some time, because the animation in the Preview region also needs to be calculated although only a small copy of your images will be used.

Effect

Use the List to select an Effect.

Transition

Use the List to select a Transition. Check the text in the titlebar, which remembers you if there is no second image.

Number of Frames

The number of frames to be produced, controls the smoothness of the transformation.

PingPong

Check this field if you want the Effect/Transition to end in the source image. In this case the effect will be calculated and the last produced image will be used  as the source for the same effect in the reverse direction.
This option is especially useful with Effects.

Parameters for Animation

Depending on the selected Effect or Transition here is where you supply additional parameters for the calculation. Use the help on the selected Effect or Transition for the meaning of the certain values

Description of Effects

Description of Transitions


Description of Effects

A list of available Effects follows.

Parameter available for all Effects :

Nr.of Frames controlling the number of images produced therefore also controlling the smoothness of the transformation.

PingPong - refer to Select Effect/Transition Dialog

Blur

Blur is a convolution available in every image processor. As an Effect the image is 'Blurred' depending on the value entered as strength .

Parameters : strength ( Range :0-100% )

Blind

Overlays the first image with the selected color as if a blind was closing.

Parameters :

Blind Height - the height of one blind bar in pixel

Color               - specifies the color of the blind

Checkers

Structurizes the images by overlaying a checker-like pattern.

The color of the checkers is determined by lightening/darkening certain regions of the image.

Parameters : none.

Color Blend Out

The Color Blending effect performs a color blending from the 1st Image to the specified color.

The last image of the animation will contain only the specified color.

Parameters :

‘Dark to Light’ : If the color blending should start with dark colors and go to light colors or vice versa.

'Color' : Defines if the Background Color.

Fade Out

Fades from first image into the specified color.

The last image of the animation will contain only the specified color.

Parameters :

‘Color’ : Defines the final color.

Flag

Image projected onto a waving flag.

Parameters :

Number of halfwaves - e.g.: 4 means 2 sine-waves.
Amplitude in % - percentage of image height.

Frame Out

Draws a frame around the 1st Image and lets the Background Colorshine through.

Parameters :

'Color' : Defines the Background Color.

Fringe

Fringes of the selected color overlay the first image.

Fringes starting at even positions move in from one side, fringes starting at odd positions come from the other side.

Parameters :

Width of fringe - the width of one fringe in pixel

Direction           - specifies if the fringes move vertical (Top/Bottom) or horizontal

                               (Left/Right)

Color                  - specifies the color of the fringes

Transparent     - check this checkbox to have transparent fringes

Note: The Width of fringe must not exceed half of the image width.

Invert

The Invert effect fades the Source-Image into its complement.

Parameters :

‘Color’ : Defines the fading color which will be used during the conversion of the Source-Image.

Move

The Move effect moves the Source-Image from the center to one of 8 directions.

Parameters :

'Image 1' : Defines the movement of the Source-Image.

‘Color’ : Defines the color to be visible in parts of the animation which are not occupied by the Source-Image.

Page

The Page effect turns away the Source-Image.

Parameters :

‘Predefined’ : In here, some predefined movements are collected. To use other kinds of movement, just specify different values in the ‘Start Angle’, ‘Angle Increment’ and ‘Rolling Thickness’ parameters.

‘Start Angle’ : This value defines the starting angle of the movement. It also automatically defines the corner where the paging will be started:

If the angle is in the range from 0 to 90, the starting corner will be on top/left.

If the angle is in the range from 90 to 180, the starting corner will be on bottom/left.

If the angle is in the range from 180 to 270, the starting corner will be on bottom/right.

If the angle is in the range from 270 to 360, the starting corner will be on top/right.

The ‘Start Angle’ can contain positive or negative angle values.

‘Angle Increment’ : This value defines the rotating direction as well as the ending corner of the paging.

E.g. if this value is 180 (or -180 or 540) the ending corner will be exactly on the other side than the starting corner. If this value is 360, the ending corner will be the starting corner as well.

If the angle is a large positive or negative value (e.g. 720 or -720), the paging seams to be performed multiple times, as if the Source-Image is taken away, lied down again and then taken away once more.

There is no maximum or minimum limit for this value but very large (negative or positive) values will make sense only for a big number of frames.

‘Rolling Thickness’ : This value indicates the final height of that part of the Source-Image which has been already taken away. This value is defined in pixel units. Although this value cannot be negative, a value of 0 will make the part of the Source-Image already moved away look like if it lay s flat on the floor. To make the effect look more realistic, a value between 10 and 60 (depending on the size of the Source-Image) should be specified.

‘Color’ : This parameter indicates the color which will be visible in that of the animation not occupied by the Source-Image.

Pixelize

The pixel size is increased by averaging over nearby colors, so less detail is visible from frame to frame.

Parameters : none.

Radar

The Radar effect changes the Image by rotating a line and filling the area passed by the line with the specified color.

Parameters :

‘Position’ : Defines the rotation center position. The center of the image or one corner can be selected.

If the center of the image has been chosen, the ‘Start angle’ can be specified. For all other selections, no start angle is necessary cause this will depend on the selected corner and the rotation direction. ‘Start angle’ : Defines the start angle of the line rotating around the image’s center.

‘Clockwise’ : Defines the direction of the rotation (clockwise or counterclockwise).

‘Color’ : Defines the color of the newly painted area.

Roll Sphere

The Roll Sphere effect maps the Source-Image over a sphere and let it rotate.

Parameters :

‘Radius [%]’ : Defines the radius of the sphere in percent of the smaller value of the image width or height. ‘Roll Left’ : Defines the rotation direction of the sphere.

‘Color’ : Defines the color to be visible in parts of the animation not occupied by the sphere.

Rotor

Rotates the image linewise, resulting in a vertically mirrored image.

Parameters : none.

Random Shine Through

Random pixel will change their color to the color selected in the Select Effect/Transition Color Selection Field, resulting in a unicolor image.

Parameters : color.

Spiral

Image will be overlayed by a Spiral .
Because of the discrete size of the spiral rectangles a warning will appear if the quadratic spiral grid does not correspond with the number of frames.

Parameters :

‘Color’ : Defines the color to be visible in parts of the animation not occupied by the sphere.

Tilt In

The Tilt In effect flips in the Source-Image from one side of the image. Some additional swings can be defined as well.

Parameters :

‘Side’ : Defines the side of image from where the Source-Image should flip in.

‘Nr. Halfwaves’ : Defines the number of additional swings. If the value is e.g. 1, the Source-Image will flip in from the back, swing into the front and then back to its final position. ‘Color’ : Defines the color to be visible in parts of the animation not occupied by the Source-Image.

Wave Out

The Wave Out effect moves the Source-Image like a wave outside of the animation image area.

Parameters :

‘Nr. Halfwaves’ : Defines the number of swings the Source-Image should do till it has totally left the animation image area. ‘Left side’ : Defines if the Source-Image should move out on the left or right side.

‘Up to Down’ : Defines the wave’s movement of the Source-Image. It can be from up to down or down to up.

‘Color’ : Defines the color to become visible behind the Source-Image.

Weave

Texturizes the image so that it looks like coarsely weaved cloth (e.g. linen).

Parameters : none.

Zoom Out

The Zoom Out effect zooms out the Source-Image into the center of the image combined with a rotation.

Parameters :

‘Rotation Angle’ : Defines the angle (in degrees) plus direction of the rotation when the Source-Image is zooming out. 0 means no rotation.

Negative values rotate the Source-Image clockwise, positive values rotate counterclockwise.

E.g. an angle of value -720 will rotate the Source-Image clockwise twice.

‘Color’ : Defines the color to become visible behind the Source-Image.


Description of Transitions

A list of available Transitions follows.

Parameter available for all Transitions :

Nr.of Frames controlling the number of images produced therefore also controlling the smoothness of the transformation.

PingPong - refer to Select Effect/Transition Dialog

Blind

Overlays the first image with the second image as if a blind was closing.

Parameters :

       Blind Height - the height of one blind bar in pixel

Blur

Blur is a convolution available in every image processor. As a Transition the source image is blurred depending on the value entered as strength ( Range :0-100% ), this blurred image of the first image is mixed with a blurred version of the destination image, then the process is rewinded, resulting in the second image.

Parameters : Strength.

Color Blend

The Color Blending transition performs a color blending from the 1st Image to the 2nd Image.

Parameters : none.

‘Dark to Light’ : If the color blending should start with dark colors and go to light colors or vice versa.

‘Blend Out’ : Defines if the 1st Image should blend out or the 2nd Image should blend in.

Fade

Fades from first image into second image.

Parameters : none.

Frame In 2nd Image

Draws a frame around the 2nd Image and paints the remaining part of the 2nd Image over the 1st Image.

Parameters : none.

Frame Out 1st Image

Draws a frame around the 1st Image and let shine through the 2nd Image.

Parameters : none.

Fringe

Fringes of either the second image (Transition) overlay the first image.

Fringes starting at even positions move in from one side, fringes starting at odd positions come from the other side.

Parameters :

Width of fringe - the width of one fringe in pixel

Direction       - specifies if the fringes move vertical (Top/Bottom) or horizontal

                          (Left/Right)

Note: The Width of fringe must not exceed half of the image width.

Move 1.st Image

Moves the first image away showing the second image.

Parameters :

'Image 1' : Defines the movement of the 1st Image.

Move 2nd Images

Moves the first image away showing the second image.

Parameters :

‘Image 2’ : Defines the movement of the 2nd Image.

Move Both Image

Moves the first image away showing the second image.

Parameters :

‘Image 1’ : Defines the movement of the 1st Image.

‘Image 2’ : Defines the movement of the 2nd Image.

‘2. Image over 1. Image’ : Defines if the 1st Image is over the 2nd Image or vice versa.

‘Color’ : Defines the color to be visible in parts of the animation which are not occupied by the Images.

Overblend

The Overblend transition blends from the 1st Image into the specified color and through to the 2nd Image.

Parameters :

‘Color’ : Defines the color which will be used during the fading from the 1st Image into the 2nd Image.

Page

The Page transition turns away the 1st Image and let appear the 2nd Image.

Parameters :

‘Predefined’ : In here, some predefined movements are collected. To use other kinds of movement, just specify different values in the ‘Start Angle’, ‘Angle Increment’ and ‘Rolling Thickness’ parameters.

‘Start Angle’ : This value defines the starting angle of the movement. It also automatically defines the corner where the paging will be started:

If the angle is in the range from 0 to 90, the starting corner will be on top/left.

If the angle is in the range from 90 to 180, the starting corner will be on bottom/left.

If the angle is in the range from 180 to 270, the starting corner will be on bottom/right.

If the angle is in the range from 270 to 360, the starting corner will be on top/right.

The ‘Start Angle’ can contain positive or negative angle values.

‘Angle Increment’ : This value defines the rotating direction as well as the ending corner of the paging.

E.g. if this value is 180 (or -180 or 540) the ending corner will be exactly on the other side than the starting corner. If this value is 360, the ending corner will be the starting corner as well.

If the angle is a large positive or negative value (e.g. 720 or -720), the paging seams to be performed multiple times, as if the Source-Image is taken away, lied down again and then taken away once more.

There is no maximum or minimum limit for this value but very large (negative or positive) values will make sense only for a big number of frames.

‘Rolling Thickness’ : This value indicates the final height of that part of the 1st Image which has been already taken away. This value is defined in pixel units. Although this value cannot be negative, a value of 0 will make the part of the Source-Image already moved away look like if it lays flat on the floor. To make the effect look more realistic, a value between 10 and 60 (depending on the size of the Source-Image) should be specified.

Pixelize

The pixel size is increased by averaging over nearby colors, so less detail is visible from frame to frame.

The pixelized first image is combined with the pixelized destination image and the 'pixelization' of the second image is done in inverted direction.

Parameters : none.

Radar

The Radar transition changes the 1st Image by rotating a line and filling the area passed by the line with the 2nd Image.

Parameters :

‘Position’ : Defines the rotation center position. The center of the image or one corner can be selected.

If the center of the image has been chosen, the ‘Start angle’ can be specified. For all other selections, no start angle is necessary cause this will depend on the selected corner and the rotation direction.

‘Start angle’ : Defines the start angle of the line rotating around the image’s center.

‘Clockwise’ : Defines the direction of the rotation (clockwise or counterclockwise).

Random Rects

Rectangles of the second image appear in the first image at random positions.

The number of rectangles used for each frame depends on the total number of frames and on the selected number of rectangles per row and column.

Parameters : none.

Rects per row    - number of rectangles to fit into the image width

Rects per column - number of rectangles to fit into the image height

Note: The number of frames must be larger than the total number of rectangles

(Rects per row * Rects pr column).

Random Shine Through

Random pixel will change their color to the color of the second image at that position. In other words : First image transforms to second image random pixel by random pixel.

Parameters : none.

Roll Sphere

The Roll Sphere transition maps both Images over a sphere and let it rotate.

Parameters :

‘Radius [%]’ : Defines the radius of the sphere in percent of the smaller value of the image width or height.

‘Roll Left’ : Defines the rotation direction of the sphere.

‘Color’ : Defines the color to be visible in parts of the animation not occupied by the sphere.

Roll Sphere with Satellite

The Roll Sphere transition maps the 1st Image over a Sphere which can rotate or not and uses the 2nd Image as satellite which will rotate around the Sphere. The radius of the satellite rotation cannot be defined yet. It will be set the maximum possible value so that the satellite will always be totally visible within the visible area.

Parameters :

‘Start Position' : Contains some pretty predefined values.

'Sphere Radius [%]' : Defines the radius of the sphere in percent of the smaller value of the image width or height.

'Satellite Tilt Angle' : This will tilt the rotation of the satellite around the horizontal axe.

'Satellite Angle' : After the rotation has been tilt, this angle in here will tilt the result around the vertical axe.

'Satellite Width [%]' : Defines the width of the Satellite Image in percent of the whole visible area's width.

'Satellite Height [%]' : Defines the height of the Satellite Image in percent of the whole visible area's height.

'Roll Sphere Left' : Defines the rotation direction of the sphere.

'Roll Sphere' : Enables/Disables rotation of the sphere.

'Roll Satellite Left' : Defines the rotation direction of the satellite around the sphere.

'Flat Satellite' :

If disabled, the 2nd Image will be mapped on a sphere as well (like the main sphere, too). Of course the Image will be scaled according to the defined width and height.

If enabled, the 2nd Image will be only scaled according to the width and height definitions but nothing else.

'Color' : Defines the color to be visible in parts of the animation not occupied by the sphere and satellite. (So it will be the Background Color).

Rotor

Rotates the source image linewise, resulting in the second image as if you turn a paper with the source image on one side and the destination image on the other side.

Parameters : none.

Spiral

Spirals first image to second.
Because of the discrete size of the spiral rectangles a warning will appear if the quadratic spiral grid does not correspond with the number of frames.

Parameters : none.

Tilt In

The Tilt In transition flips in the 2nd Image from one side of the 1st Image. Some additional swings can be defined as well.

Parameters :

‘Side’ : Defines the side of image from where the 2nd Image should flip in.

‘Nr. Halfwaves’ : Defines the number of additional swings. If the value is e.g. 1, the 2nd Image will flip in from the back, swing into the front and then back to its final position.

Wave

The Wave transition moves out the 1st Image (if ‘Out’ is selected) or in the 2nd Image (if ‘Out’ is not selected) like a wave to/from the outside of the animation image area.

Parameters :

‘Nr. Halfwaves’ : Defines the number of swings the Source-Image (this is either the 1st or 2nd Image depending on the value of ‘Out’) should perform.

‘Left side’ : Defines if the Source-Image should move in/out on the left or right side.

‘Up to Down’ : Defines the wave’s movement of the Source-Image. It can be from up to down or down to up.

‘Out’ : Defines if the 1st Image should wave out or the 2nd Image should wave in.

Zoom In

The Zoom In transition zooms in the 2nd Image from the center of the image combined with a rotation.

The 1st Image will be handled as background.

Parameters :

‘Rotation Angle’ : Defines the angle (in degrees) plus direction of the rotation when the 2nd Image is zooming in.

0 means no rotation - only zooming in.

Negative values rotate the 2nd Image clockwise, positive values rotate counterclockwise.

E.g. an angle of value -720 will rotate the 2nd Image clockwise twice.

Zoom Out

The Zoom Out transition zooms out the 1st Image into the center of the image combined with a rotation.

The 2nd Image will be handled as background.

Parameters :

‘Rotation Angle’ : Defines the angle (in degrees) plus direction of the rotation when the 1st Image is zooming out.

0 means no rotation - only zooming out.

Negative values rotate the 2nd Image clockwise, positive values rotate counterclockwise.

E.g. an angle of value -720 will rotate the 2nd Image clockwise twice.

Rotor

Rotates the source image linewise, resulting in the second image as if you turn a paper with the source image on one side and the destination image on the other side.

Parameters : none.


Banner Text

This tool is very impressive, but still easy to use. All parameters are entered in the Banner Dialog .

The result of the Banner is a series of images showing the text you entered in the font you chose, floating from left to right.

What makes this tool so impressive ?

·	userdefined Text

·	usedefined Font

·	usedefined Amount of Shadow

·	usedefined Text Color

·	usedefined Background Color

·	usedefined Shadow Color

·	usedefined Number of Images

·	usedefined Border

·	Preview

Tip :

You can use this tool to produce a single image containing text with shadow which could be the source of an Effect or Transition.


Banner Dialog

At the top you see a preview of the Banner Text which updates automatically.

Below you can select the following :

Controls :

Update Preview :

By pressing this button the preview will be updated.

Text :

Use this entryfield to enter the text you want to be shown in the banner.

Choose Font :

Use this Button to choose the font for the banner.

Text :

Use this entryfield to enter the text you want to be shown in the banner.

Extras :

Enable Shadow :

If this CheckBox is checked a shadow will be added to the banner.

Shadow X Offset :

This value specifies the displacement between the text and the shadow on the x-axis ( left - right ).

Tip : Use negative values to move the shadow to the left.

Shadow Y Offset :

This value specifies the displacement between the text and the shadow on the y-axis ( top-down ).

Tip : Use negative values to move the shadow above the text.

Shadow Thickness:

Specifies the width  of the shadow.

Shadow Intensity:

Use this slider to select the 'darkness' of the shadow.

Draw Border:

Enable this CheckBox to have a border around the image.

Text Y-Offset:

Use this value to move the text up or down.

Animation :

Nr. of Frames:

Choose the number of frames to be produced.

Image Width :

Use this entryfield to specify the Width of the image.

Image Height :

Use this entryfield to specify the Height of the image.

Color :

Text :

Choose the Text Color.

Background:

Choose the Background Color.

Shadow:

Choose the Shadow Color.


HTML

How to insert the produced animation into a Web Page ?

WWW Gif Animator produces a single Gif 89a Image containing all images you inserted or created, so all you have to do is insert this image to your HTML document using the simple IMG TAG

The simplest way :

<IMG SRC="Example.GIF" ALT="Text" BORDER=0 ALIGN=CENTER>

where

Example.Gif is the name of the file you want to insert

Text is a Text which will be displayed if the browser was configured not to load images.

Overview of all possibilities :

<IMG .... >

SRC=	The URL of the image.

ALT= 	A text string displayed by browsers configured not to display images or not supporting images.

ALIGN=	Alignment of the image

LEFT, RIGHT 	image is aligned to left or right, following text flows beside that image

CENTER	image is aligned to the middle of the page.

TOP, MIDDLE, BOTTOM  for vertical alignment

VSPACE=	the vertical space between the image and the text below or above it

HSPACE=	the horizontal space between the image and the text left or right of it

WIDTH=	The width of the image in pixels, if this value is not the actual size of the image it is scaled horizontally

HEIGHT=	The height of the image in pixels, if this value is not the actual size of the image it is scaled vertically

BORDER=	Draws a border with the specified width around the image

LOWSRC=	The URL of an image which will be loaded prior to the image specified in SRC=... , usually a smaller image

ISMAP=

USEMAP=	both specify imagemaps

It should be noticed that not all tags are supported by all browsers:

WIDTH, HEIGHT, ALIGH=LEFT, ALIGN=RIGHT require Browsers supporting HTML 3.0

BORDER, LOWSRC, USEMAP are Netscape specific extensions to HTML, which might be included to future HTML standards.

For more details refer to the W3 Consortium  http://www.w3.org/

or refer to books like 'teach yourself Netscape Web Publishing in a week' by Wes Tatters


IDH_REGISTER OK
After entering First Name, Last Name and Registration Code press this button to complete your registration.


IDH_REGISTER_FIRSTNAME
Use this field to enter your First Name


IDH_REGISTER_LASTNAME
Use this field to enter your Last Name


IDH_REGISTER_CODE
Use this field to enter the Registration Code

you received from the authors


IDH_REGISTER_LATER
Press this button to proceed unregistered

Don't forget the 30 days trial period :-)


IDH_REGISTER_FORM
Press this button to view/print the Order Form

( using notepad )


IDH_OPTION_IMAGEREMOVE
If checked,  you will be asked to confirm whether you really want to delete an image from the Tree View.


IDH_OPTION_CURRENT
If checked,the number of images entered in the Select Effect/Transition Dialog will be used to create the preview.


IDH_OPTION_ALWAYS
If checked the number you enter in the edit field will be used for calculating the preview regardless of the value you enter in the Select Effect/Transition Dialog.


IDH_OPTION_EDITFRAMES
Enter the desired Number of Frames to be used for Preview


IDH_OPTION_MULTIINST
If checked, more than one instance of WWW Gif Animator can be started at once. This option is turned off by default, because if Gif files are associated with WWW Gif Animator and you select more than one image in the Explorer and press enter, each of the selected images will be opened in a separate instance of WWW Gif Animator .


IDH_OPTION_KEEPPPTC
Many of the Effects/Transitions use truecolor information, then convert the image to a 256 color image and then delete the 'unused' truecolor data.
If this option is checked this data will not be deleted, which is only useful if you want to export the resulting images as Jpeg files.


IDH_OPTION_BID_WARNINGS
Press this button to reactivate all warnings previously disabled by 'Don't Show this message again '.


IDH_OPTION_CHECKPREVIEW
If checked, each time the Effect/Transition Dialog is opened the preview will be calculated, which may be time consuming.


IDH_OPTION_GIFSLIDER
This slider indicates how hard WWW Gif Animator  tries to reduce colors to decrease the size of the resulting image stream. This is only relevant for optimizing images.


IDH_JPEGCOMPRESSION
Use this Slider to choose the compression level for Jpeg files, this is a trade-off between quality and image size.
100 .... no compression - rather big files
     0 ... maximum compression - low quality
A value of 75 is recommended, but depends on the image saved.


IDH_JPEGEDIT
Displays the exact value for Jpeg Compression, refer to Jpeg Compression for more help.


IDH_SAVE_OPTIMIZED
Choose this option if you want the saved stream to be optimized concerning size : WWW Gif Animator  tries to
put as many colors as possible into the global palette,
find the smallest rectangle which has to be saved !!!

Use this feature only with a new SaveFileName, since editing optimized pictures is quite difficult.


IDH_SAVE_DISPLAYRESULT
If checked, the optimized (and saved) images will replace those in currently in the script.
If not checked, the optimized images will be saved, but you will still see the unoptimized images for further editing.


IDH_SELECT_PREVIEW
You will see a preview of the selected Effect/Transition using the parameters you entered.


IDH_SELECT_EFFECT_CHECK
Check this box if you want to insert an Effect.


IDH_SELECT_EFFECT_COMBO
Use this combobox to select the Effect you want to insert.


IDH_SELECT_TRANS_CHECK
Check this box if you want to insert a Transition.

Make sure there is a second image in the script.


IDH_SELECT_TRANS_COMBO
Use this combobox to select the Transition you want to insert.


IDH_SELECT_FRAMES
The number of frames to be produced, controls the smoothness of the transformation.


IDH_SELECT_PINGPONG
Check this field if you want the Effect/Transition to end in the source image. In this case the effect will be calculated and the last produced image will be used  as the source for the same effect in the reverse direction.
This option is especially useful with Effects.


IDH_SELECT_COLOR
Select a Color by pressing this field with the left mouse button.

This field is not always active, because not all Effects/Transitions support it.


IDH_SELECT_COMBO1
Use this combobox to select certain predefined parameters.

Please refer to the help for the Effect/transition for detailed information about parameters.

This field is not always active, because not all Effects/Transitions support it.


IDH_SELECT_COMBO2
Use this combobox to select certain predefined parameters.

Please refer to the help for the Effect/transition for detailed information about parameters.

This field is not always active, because not all Effects/Transitions support it.


IDH_SELECT_EXTRAS
Use this edit fields to enter parameters to suit the Effect/Transition your style.

Please refer to the help for the Effect/transition for detailed information about parameters.

These fields are not always active, because not all Effects/Transitions support them.


IDH_SELECT_CHECK
Use these check boxes to select some boolean values.

Please refer to the help for the Effect/transition for detailed information about parameters.

These fields are not always active, because not all Effects/Transitions support them.


IDH_SELECT_DESCRIPTION
In this field you will see a short description of the Effect/transition you selected in the combo boxes above.

For detailed information refer to the help on the certain Effect/transition.


IDH_PARAM_DISPOSAL
Disposal Method - Indicates the way in which the graphic is to be treated after being displayed (by the browser).

No disposal: The decoder is not required to take any action.

Do not dispose: The graphic is to be left in place.

Restore to background color: The area used by the graphic must be restored to the background color.

Restore to previous: The decoder is required to restore the area overwritten by the graphic with what was there prior to rendering the graphic.


IDH_PARAM_GLOBALWIDTH
Global Width of the images in pixel


IDH_PARAM_GLOBALHEIGHT
Global Height of the images in pixel


IDH_PARAM_EDITPAL
Push this button to view and/or edit the palette


IDH_PARAM_BKGRCOL
Click into the color field to select the background color from the global palette


IDH_PARAM_USEGLOBALPAL
Indicates whether a global palette is used for all images


IDH_PARAM_USEGLOBALDELAY
Check this to use the same delay time for all images


IDH_PARAM_GLOBALDELAY
Specifies the global delay in hundredth of a second, only valid if Use Global Delay is checked.


IDH_PARAM_INFINITELOOP
If checked, the Browser will restart the animation after it is finished, thus creating an infinite loop.


IDH_PARAM_NUMLOOPS
Specifies the number of times the animation is to be restarted


IDH_PARAM_USEGLOBALDISPOSAL
Specifies if the same disposal method shall be used for all images


IDH_PARAM_LOCALWIDTH
Local Width of the selected image in pixel


IDH_PARAM_LOCALHEIGHT
Local Height of the selected image in pixel


IDH_PARAM_XOFF
Specifies the x-offset of the selected image, i.e. the distance of the selected image from the left border.


IDH_PARAM_YOFF
Specifies the y-offset of the selected image, i.e. the distance of the selected image from the top border.


IDH_PARAM_LOCALPAL
If checked this image uses a local palette which overrides the global palette.


IDH_PARAM_USETRANSPARENT
If checked, this image has a transparent color.


IDH_PARAM_TRANSCOLOR
Click into the color field to select the transparent color from the local palette


IDH_PARAM_DELAYL
Specifies the local delay in hundredth of a second, only valid if Use Global Delay is not checked.


IDH_PARAM_INTERLACE_CHECK
Indicates whether this image is interlaced or not.


IDH_RESIZE_OLDSIZE
Specifies the original size of the image(s)


IDH_RESIZE_NEWSIZE
Use these entry fields to enter the desired size.


IDH_RESIZE_MAINTAINASPECT
If checked, the ratio width to height will be maintained.


IDH_BANNER_PREVIEW
In this field you will see a preview of the Banner.


IDH_BANNER_UPDATEPREVIEW
Usually the banner updates automatically - use this button to force an update.


IDH_BANNER_TEXT
Insert the Text to be used as a banner here.


IDH_BANNER_CHOOSEFONT
Press this button to choose the desired Font and Color for the banner.


IDH_BANNER_SHADOWON
If checked, the banner will cast a shadow .


IDH_BANNER_SHADOWXOFF
This value specifies the displacement between the text and the shadow on the x-axis ( left-right ).


IDH_BANNER_SHADOWYOFF
This value specifies the displacement between the text and the shadow on the y-axis ( top-down ).

Tip : Use negative values to move the shadow above the text.


IDH_BANNER_SHADOWTHICKNESS
Represents the thickness of the shadow


IDH_BANNER_BORDER
If checked, a border will be drawn around the banner.


IDH_BANNER_INTENSITY
Use this slider to select the 'darkness' of the shadow.


IDH_BANNER_YOFF
Represents the distance of the banner (text) in y direction


IDH_BANNER_FRAMES
Used to enter the desired number of frames - this value represents the smoothness of the motion.


IDH_BANNER_CX
Represents the width of the produced images.


IDH_BANNER_CY
Represents the height of the produced images.


IDH_BANNER_FGNDCOLOR
Used to set the foreground color .


IDH_BANNER_BGNDCOLOR
Used to set the background color .


IDH_BANNER_SHADOWCOLOR
Used to set the shadow color .


IDH_COMMENT
Use this edit field to view and/or change the comment(s) associated with the animation.